<template>
	<div style="background-color: rgb(232, 232, 231,0.2);" @click="closeSel">
		<Navigation></Navigation>
		<Search :dateCalendar="dateCalendar" :cityCalendar="dateCalendar" :cityCalendarTwo="dateCalendar"></Search>
		<RotationChart></RotationChart>
		<Map ref="Map" style="margin-top: 20px;" :dateCalendar="dateCalendar"></Map>
		<AirlineCompany></AirlineCompany>
		<BottomNavigation style="margin-top: 20px;"></BottomNavigation>
	</div>
</template>

<script>
	import Navigation from "../components/Navigation"
	import Search from "../components/Search"
	import RotationChart from "../components/RotationChart"
	import AirlineCompany from "../components/AirlineCompany"
	import BottomNavigation from "../components/BottomNavigation"
	import Map from "../components/Map"
	
	export default {
		data(){
			return{
				dateCalendar:null
			}
		},
		components: {
		  Navigation,
		  Search,
		  RotationChart,
		  AirlineCompany,
		  BottomNavigation,
		  Map
		},
		methods:{
			closeSel(event) {
				this.dateCalendar=event;
			},
			refresh(){
				this.$nextTick(() => {
					this.$refs["Map"].initialization();
				});
			}
		}
	}
</script>

<style>
</style>